<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .cm-container{
            width: 320px;
            height: 480px;
            border:1px solid #e9e9e9;
            float: left;
        }

    </style>
</head>
<body>
    <div class="cm-container">
        <video id="el-video"></video>
    </div>

    <div class="cm-container">
        <button id="el-button">拍照</button>
    </div>

    <div class="cm-container">
        <canvas id="el-canvas"></canvas>
    </div>

<script>
    elVideo = document.getElementById("el-video");
    elButton = document.getElementById("el-button");
    elCanvas = document.getElementById("el-canvas");

    var errfn = function (err) {
        console.log(err);
        alert(err);
    }
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    if(!navigator.webkitGetUserMedia) {
        navigator.getUserMedia({ "video": true }, function (stream) {
            elVideo.src = stream;
            elVideo.play();
            alert("kk");
        }, errfn );
    }else{
        navigator.getUserMedia({ "video":true }, function (stream) {
            elVideo.src = window.URL.createObjectURL(stream);
            elVideo.play();
            alert("00");
        }, errfn );
    }

    var context = elCanvas.getContext("2d");
    context.drawImage(elVideo, 10, 10);



</script>
</body>
</html>